<!--
 * @Description: 
 * @Author: pangjl
 * @Date: 2024-11-14 10:19:05
 * @LastEditors: Wen
 * @LastEditTime: 2024-11-14 17:42:57
 * 我希望明天不上课！
-->
<template>
  <div>
    <!-- <button>按钮</button>
    <el-button>按钮</el-button> -->
    <!-- 注册组件 -->
    <!-- <Reg v-if="flag" @my-alert="myAlert" /> -->
    <!-- 登录 -->
     <!-- <login v-if="!flag"/>
     <p v-if="flag" @click="changeFlag">已有账号,直接<a href="">登录</a></p>
     <p v-if="!flag" @click="changeFlag">没有账号,立即<a href="">注册</a></p>
     <button @click="changeFlag">{{ flag ? '去登录页面' : '去注册页面' }}</button> -->
     <!-- 按钮样式 -->
     <!-- type、plain、round和circle -->
     <!-- 写一个主要按钮 -->
     <!-- <el-button type="primary" :disabled="flag" plain round>主要按钮</el-button>
     <el-button type="primary" :disabled="flag" plain round>主要按钮</el-button>
     <br> -->
    </div>
    <div>
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>12-DOM演示</title>
</head>

  <div style="font-size: 30px; text-align: center;" id="tb1">课
    程表</div>
  <table width="800px" border="1" cellspacing="0" align="center">
    <tr>
      <th>学号</th>
      <th>姓名</th>
      <th>分数</th>
      <th>评语</th>
    </tr>
    <tr align="center" class="data">
      <td>001</td>
      <td>张三</td>
      <td>90</td>
      <td>很优秀</td>
    </tr>
    <tr align="center" class="data">
      <td>002</td>
      <td>李四</td>
      <td>92</td>
      <td>优秀</td>
    </tr>
    <tr align="center" class="data">
      <td>003</td>
      <td>王五</td>
      <td>83</td>
      <td>很努力,不错</td>
    </tr>
    <tr align="center" class="data">
      <td>004</td>
      <td>赵六</td>
      <td>98</td>
      <td>666</td>
    </tr>
  <br>
  <div style="text-align: center;">
    <input id="b1" type="button" value="改变标题内容" onclick="fn1()">
    <input id="b2" type="button" value="改变标题颜色" onclick="fn2()">
    <input id="b3" type="button" value="删除最后一个" onclick="fn3()">
  </div>
<script>
  function fn1() {
    document.getElementById('tb1').innerHTML = "学员成绩表";
  }

  function fn2() {
    document.getElementById('tb1').style = "font-size: 30px;text- align: center;color: red;"
  }

  function fn3() {
    var trs = document.getElementsByClassName('data');
    trs[trs.length - 1].remove();
  }
</script>

</html>
    </div>
    
    
</template>

<script setup>
// import { ref } from 'vue';
// import Reg from './components/view/Reg.vue';
// import login from './components/view/login.vue';
//flag 为 true 显示注册页面
//flag 为 false 显示登录页面
// const flag = ref(true);
// //切换登录注册页面
// function changeFlag () {
//   flag.value = !flag.value;
// }
// // 父组件中声明的事件
// function myAlert () {
//   alert('我是父组件中的事件-myAlert');
// }
// //登录
// function toLogin() {
//   login.value = true;
//   //模拟登录请求
//   setTimeout( ()=>{
//     alert("登录成功")
//   login.value = false;
//   },3000)
// }
</script>
<style scoped>

</style>
